<template>
  <!-- 个人中心 -->
  <div class="user">
    <!-- 整体 -->
    <div class="user_content">
      <!-- 顶部信息 -->
      <div class="userinfo">
        <van-image round width="0.95rem" height="0.95rem" :src="picture1" />
        <span class="brief_introduction">{{ userInfoShow.remark }}</span>
        <!-- 用户信息 -->
        <div class="xinxi">
          <div class="xinxi_c">
            <div>
              姓名 <span>{{ userInfoShow.nickName }}</span>
            </div>
            <div>
              联系方式 <span>{{ userInfoShow.phone }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 各个功能 -->
      <div class="user_function">
        <van-cell-group>
          <van-cell
            title="个人中心"
            clickable
            is-link
            :icon="picture2"
            to="/userinfo"
          />
          <van-cell
            title="支付中心"
            clickable
            is-link
            :icon="picture3"
            @click="tishi"
          />
          <van-cell
            title="修改密码"
            clickable
            is-link
            :icon="picture4"
            @click="tishi"
          />
          <van-cell
            title="版本信息"
            :value="'版本' + versions"
            clickable
            is-link
            :icon="picture5"
            to="/userVersions"
          />
          <van-cell
            title="清除缓存"
            clickable
            is-link
            :icon="picture6"
            @click="clearCache"
          />
        </van-cell-group>
      </div>

      <!-- 退出登录按钮 -->
      <div class="user_quit_btn">
        <van-button type="primary" size="large" color="#e9e9e9" @click="logOut"
          >退出登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { GetUserInfo, GetUserVersions } from "@/request/api";
export default {
  data() {
    return {
      // 图片
      picture1: require("../assets/头像男 拷贝 4.png"),
      picture2: require("../assets/Personal information.png"),
      picture3: require("../assets/形状 2.png"),
      picture4: require("../assets/change Password.png"),
      picture5: require("../assets/版本信息.png"),
      picture6: require("../assets/组 16.png"),

      userInfoShow: [],

      // 版本号
      versions: "",
    };
  },
  created() {
    GetUserInfo().then((res) => {
      this.userInfoShow = res.data;
      // console.log(this.userInfoShow.remark);
    });
    // 版本号
    GetUserVersions().then((res) => {
      this.versions = res.data.versions;
    });
  },
  methods: {
    // 退出登录
    logOut() {
      this.$dialog
        .confirm({
          title: "确定退出登录吗?",
        })
        .then(() => {
          // on confirm
          localStorage.removeItem("token");
          this.$toast.success("退出成功");
          setTimeout(() => {
            this.$router.push("/login");
          }, 2000);
        })
        .catch(() => {
          // on cancel
        });
    },
    // 提示
    tishi() {
      this.$toast({
        message: "功能建设中",
        icon: "cross",
      });
    },

    // 清除缓存
    clearCache() {
      this.$router.push("/home");
      setTimeout(() => {
        location.reload();
      }, 500);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.user {
  .user_content {
    /* 顶部 */
    position: relative;
    background-color: #2350a6;
    height: 1.55rem;
    width: 100%;
    /* 用户卡片 */
    .userinfo {
      height: 1.45rem;
      width: 3.45rem;
      border-radius: 0.1rem;
      background-color: #fff;
      position: absolute;
      top: 1rem;
      left: 0.15rem;
      position: relative;
      /* 头像 */
      .van-image {
        position: absolute;
        top: -0.5rem;
        left: 1.2rem;
        border: 0.04rem solid rgba(122, 122, 122, 0.3);
        z-index: 99;
      }
      /* 简介 */
      .brief_introduction {
        position: absolute;
        top: 0.6rem;
        left: 1.15rem;
        font-size: 0.14rem;
        color: #747474;
        z-index: 99;
      }
      /* 信息 */
      .xinxi {
        padding-top: 0.95rem;
        border-radius: 0.1rem;
        .xinxi_c {
          border-top: 0.01rem dashed #e6e6e6;
          padding: 0.17rem 0.16rem 0.1rem;
          display: flex;
          justify-content: space-between;
          div {
            font-size: 0.14rem;
            color: #999;
            font-weight: 700;
            span {
              color: #444;
            }
          }
        }
      }
    }
    /* 各个功能盒子 */
    .user_function {
      width: 3.45rem;
      border-radius: 0.1rem;
      position: absolute;
      top: 2.6rem;
      left: 0.15rem;
      .van-cell-group {
        height: 2.25rem;
        border-radius: 0.1rem;
        padding-top: 0.05rem;
        .van-cell__left-icon {
          margin-right: 6px;
        }
      }
    }

    /* 退出按钮 */
    .user_quit_btn {
      width: 3.45rem;
      position: absolute;
      top: 5.2rem;
      left: 0.15rem;
      .van-button {
        border-radius: 0.1rem;
      }
      /deep/.van-button__text {
        color: #666;
        font-weight: 700;
      }
    }
  }
}
</style>